<!DOCTYPE html>
<html>
<head lang="en">
	
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>ELAN</title>
    <!--ICON-->
    <link href="images/favicon.ico" rel="icon">
     <!--Thư viện hiệu ứng animate-->
    <link href="css/animate.css" rel="stylesheet" type="text/css">
     <!--Reset css về mặc định trên các trình duyệt-->
    <link href="css/normalize.css" rel="stylesheet" type="text/css">
    <!--Thư viện owl plugin-->
    <link href="css/owl.theme.css" rel="stylesheet" type="text/css">
    <link href="css/owl.carousel.css" rel="stylesheet" type="text/css">
    <!--Thư viện icon font-awesome-->
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!--Thư viện superslide-->
    <link href="css/superslides.css" rel="stylesheet" type="text/css">
    <!--Css dùng chung -->
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <!--Style cho trang  -->
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <!--Style reponsive  -->
    <link rel="stylesheet" type="text/css" href="css/reponsive.css">
    
   
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <script src="plugins/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<section id="fb-root"></section>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&appId=903153506380845&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
	  // maker là icon mặc định 
	  function initialize() {
		var myLatlng = new google.maps.LatLng(20.856214, 106.678401);//toạ độ bản đồ 
		var mapOptions = {
		  zoom: 17,//độ zoom của bản đồ
		  center: myLatlng// vị trí trung tâm bản đồ
		}
		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	  
		var marker = new google.maps.Marker({
			position: myLatlng,
			map: map,
			title: 'Hello World!'
		});
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

    <header class="loc-header">
        <section class="itq-header itq-wrapper">
            <figure class="logo">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
                <figcaption class="slogan">
                    <img class="slogan" src="images/slogan.png" alt="">
                </figcaption>
            </figure><!-- .Logo -->

            <nav class="loc-submenu">
                <ul class="menu">
                    <li class="menu-border"><a href="">English</a></li>
                    <li><a href="">Đại lý</a></li>
                    <li><a href="">Tư vấn</a></li>
                    <li class="menu-border"><a href="">Hỏi đáp</a></li>
                    <li class="hotline"><span >Hotline</span> <span class="number">0989 876 890</span></li>
                </ul>
            </nav><!--loc-submenu-->

            <nav class="navigation">
                <ul class="main-menu">
                    <li class="main-menu"><a href="">Trang chủ</a></li>
                    <li class="main-menu"><a href="">giới thiệu</a></li>
                    <li class="main-menu"><a href="">sản phẩm</a>
                        <ul class="sub-menu">
                            <li class="sub-menu"><a href="">sản phẩm 1</a></li>
                            <li class="sub-menu"><a href="">sản phẩm 2</a></li>
                            <li class="sub-menu"><a href="">sản phẩm 3</a></li>
                            <li class="sub-menu"><a href="">sản phẩm 4</a></li>
                        </ul>
                    </li>
                    <li class="main-menu"><a href="">Tin tức</a>
                        <ul class="sub-menu">
                            <li class="sub-menu"><a href="">tin tức 1</a></li>
                            <li class="sub-menu"><a href="">tin tức 2</a></li>
                            <li class="sub-menu"><a href="">tin tức 3</a></li>
                            <li class="sub-menu"><a href="">tin tức 4</a></li>
                        </ul>
                    </li>
                    <li class="main-menu"><a href="">tuyển dụng</a></li>
                    <li class="main-menu"><a href="">liên hệ</a></li>
                </ul>
            </nav><!--.navigation-->
            <section class="button-search"></section>
            <section class="smart-menu">
            	<ul>
                	<li><i class="fa fa-bars"></i></li>
                    <li><i class="fa fa-search"></i></li>
                </ul> 
            </section>
            <section class="search">            
                <form action="" class="search-form">
                    <input type="text" placeholder="Nhập sản phẩm cần tìm">
                    <input type="submit" value="search">
                </form> 
            </section><!--.search-->
        </section>
    </header>
    <section class="clear"></section>

    <section id="slides" style="height:515px;">
        <section class="slides-container">
            <img src="uploads/slider-1.jpg" alt="Cinelli">
            <img src="http://demhan.com/Portals/170/730045changagoi4.jpg" alt="Surly">
            <img src="http://demhan.com/Portals/170/7670127changagoi3.jpg" alt="Cinelli">
            <img src="http://bupbong.vn/profiles/bupbongvn/uploads/attach/p1399976793_jj078.jpg"  alt="Affinity">
        </section>

         <nav class="slides-navigation">
            <a href="#" class="next"><img src="images/next-slides.png"></a>
            <a href="#" class="prev"><img src="images/pre-slides.png"></a>
          </nav>
    </section><!-- .slides -->
    <section class="hud_trademark itq-wrapper bounceInUp" data-delay="200">
        <header class="hud_name_trademark">
            <h3 class="the_name">chăn ga gối đệm elan</h3>
        </header>
        <section class="slide_trademark">
            <div class="nbs-flexisel-container">
                <div class="nbs-flexisel-inner">
                    <ul id="flexiselDemo3" class="nbs-flexisel-ul" style="left: -452.491193896484px; display: block;">
                        <li class="nbs-flexisel-item" style="width: 281.4px;"><a href=""><img src="uploads/slider_1_1.png"></a></li>
                        <li class="nbs-flexisel-item" style="width: 281.4px;"><a href=""><img src="uploads/slider_1_2.png"></a></li>
                        <li class="nbs-flexisel-item" style="width: 281.4px;"><a href=""><img src="uploads/slider_1_3.png"></a></li>
                        <li class="nbs-flexisel-item" style="width: 281.4px;"><a href=""><img src="uploads/slider_1_4.png"></a></li>
                        <li class="nbs-flexisel-item" style="width: 281.4px;"><a href=""><img src="uploads/slider_1_1.png"></a></li>
                        <li class="nbs-flexisel-item" style="width: 281.4px;"><a href=""><img src="uploads/slider_1_2.png"></a></li>
                        <li class="nbs-flexisel-item" style="width: 281.4px;"><a href=""><img src="uploads/slider_1_3.png"></a></li>
                        <li class="nbs-flexisel-item" style="width: 281.4px;"><a href=""><img src="uploads/slider_1_4.png"></a></li>
                    </ul>
                </div>
            </div>
        </section>
        <section class="clear"></section>
    </section><!--End .hud_trademark-->
        <section class="hud_products itq-wrapper bounceInUp" data-delay="300">
        <section class="slider_hud_products">
            <div class="nbs-flexisel-container">
                <div class="nbs-flexisel-inner">
                    <ul id="flexiselDemo2" class="nbs-flexisel-ul" style="left: -351.75px; display: block;">
                        <li class="nbs-flexisel-item" style="width: 351.75px;">
							<div class="item">
								<div class="thumb">
									<img src="uploads/slider2_1.jpg" title="" alt=""/>
									<div class="mark"></div>
									<a href="" title="" class="icon"></a>
								</div>
							</div>
                        </li>
                        <li class="nbs-flexisel-item" style="width: 351.75px;">
                            <div class="item">
								<div class="thumb">
									<img src="uploads/slider2_2.jpg" title="" alt=""/>
									<div class="mark"></div>
									<a href="" title="" class="icon"></a>
								</div>
							</div>
                        </li>
                        <li class="nbs-flexisel-item" style="width: 351.75px;">
                            <div class="item">
								<div class="thumb">
									<img src="uploads/slider2_3.jpg" title="" alt=""/>
									<div class="mark"></div>
									<a href="" title="" class="icon"></a>
								</div>
							</div>
                        </li>
						<li class="nbs-flexisel-item" style="width: 351.75px;">
							<div class="item">
								<div class="thumb">
									<img src="uploads/slider2_1.jpg" title="" alt=""/>
									<div class="mark"></div>
									<a href="" title="" class="icon"></a>
								</div>
							</div>
                        </li>
                        <li class="nbs-flexisel-item" style="width: 351.75px;">
                            <div class="item">
								<div class="thumb">
									<img src="uploads/slider2_2.jpg" title="" alt=""/>
									<div class="mark"></div>
									<a href="" title="" class="icon"></a>
								</div>
							</div>
                        </li>
                        <li class="nbs-flexisel-item" style="width: 351.75px;">
                            <div class="item">
								<div class="thumb">
									<img src="uploads/slider2_3.jpg" title="" alt=""/>
									<div class="mark"></div>
									<a href="" title="" class="icon"></a>
								</div>
							</div>
                        </li>
                    </ul>
                </div>
        </section>

        <section class="clear"></section>
    </section><!--End .hud_products-->
    <section class="hud_news hud bounceInUp itq-wrapper" data-delay="400">
        <ul class="hud_news">
            <li class="hud_news">
				<figure>
					<a href="" class="xoaydoc">
						<img src="uploads/caichan.jpg" alt="" />
					</a>
				</figure>
                <section>
                    <h4 class="title">thông tin thương hiệu</h4>
                    <p class="decs">Là một trong những nhãn hiệu giường ngủ nổi tiếng nhất thế giới, giường đệm cao su và lò xo Dunlopillo...
                    </p>
                    <a class="next" href="">Xem tiếp <img class="next "src="images/xemtiep.png"/>
                    </a>
                </section>

            </li>
            <li class="hud_news">
				<figure>
					<a href="" class="xoaydoc">
						<img src="uploads/caichan.jpg" alt="" />
					</a>
				</figure>
                <section>
                    <h4 class="title">thông tin thương hiệu</h4>
                    <p class="decs">Là một trong những nhãn hiệu giường ngủ nổi tiếng nhất thế giới, giường đệm cao su và lò xo Dunlopillo...
                    </p>
                    <a class="next" href="">Xem tiếp <img class="next "src="images/xemtiep.png"/>
                    </a>
                </section>

            </li>
            <li class="hud_news">
				<figure>
					<a href="" class="xoaydoc">
						<img src="uploads/caichan.jpg" alt="" />
					</a>
				</figure>
                <section>
                    <h4 class="title">thông tin thương hiệu</h4>
                    <p class="decs">Là một trong những nhãn hiệu giường ngủ nổi tiếng nhất thế giới, giường đệm cao su và lò xo Dunlopillo...
                    </p>
                    <a class="next" href="">Xem tiếp <img class="next "src="images/xemtiep.png"/>
                    </a>
                </section>
            </li>
        </ul>
        <section class="clear"></section>
    </section><!--End .hud_news-->

    <footer class="itq-footer bounceInUp itq-wrapper" data-delay="500">
        <section class="itq-social">
            <section class="itq-news">
                <div id="owl-demo">
                    <div class="item"><p><span class="notification">[ THÔNG BÁO ]</span><a href="#"> GIẢM GIÁ 20% KHI ĐĂNG KÝ ĐẠI LÝ CỦA CHÚNG TÔI</a><span class="date"> 07/07/2014</span></p></div>
                    <div class="item"><p><span class="notification">[ THÔNG BÁO ]</span><a href="#"> GIẢM GIÁ 20% KHI ĐĂNG KÝ ĐẠI LÝ CỦA CHÚNG TÔI</a><span class="date"> 07/07/2014</span></p></div>
                    <div class="item"><p><span class="notification">[ THÔNG BÁO ]</span><a href="#"> GIẢM GIÁ 20% KHI ĐĂNG KÝ ĐẠI LÝ CỦA CHÚNG TÔI</a><span class="date"> 07/07/2014</span></p></div>
                    <div class="item"><p><span class="notification">[ THÔNG BÁO ]</span><a href="#"> GIẢM GIÁ 20% KHI ĐĂNG KÝ ĐẠI LÝ CỦA CHÚNG TÔI</a><span class="date"> 07/07/2014</span></p></div>
                </div>
            </section><!--end .itq-news-->
            <section class="itq-social-item">
                <ul>
                    <li><a href="#"><img class="icon-f" src="images/fb-ft.png" alt=""></a></li>
                    <li><a href="#"><img class="icon-f"  src="images/tw-ft.png" alt=""></a></li>
                    <li><a href="#"><img class="icon-f"  src="images/you-ft.png" alt=""></a></li>
                    <li><a href="#"><img class="icon-f"  src="images/broa-ft.png" alt=""></a></li>
                    <li><a href="#"><img class="icon-f"  src="images/b-ft.png" alt=""></a></li>
                </ul>
            </section><!--end .itq-social-item-->
            <section class="clear"></section>
        </section><!--end .itq-social-->
        <section class="itq-last-footer">
            <section class="itq-logo-ft">
                <figure><img src="images/logo-ft.jpg" alt=""></figure>
            </section><!--end .itq-logo-ft-->
            <section class="itq-address">
                <p class="address"><span class="name">CÔNG TY TNHH CHĂN GA GỐI ĐỆM ELAN</span><span class="add">80 Quang Trung  - Hồng Bàng - Hải Phòng - Việt Nam</span></p>
                <p class="phone">Tel:<a href="#"><img src="images/skype.png" alt=""></a><span>0919 174 898</span></p>
            </section><!--end .itq-logo-ft-->
            <section class="itq-company">
                <p class="company">Copyright © 2014 By Elan.com.vn... All Rights Reserved.</p>
                <p class="dev">Designer and Developer by <a href="#">ITQ.VN</a></p>
            </section><!--end .itq-logo-ft-->
            <section class="clear"></section>
        </section><!--end .itq-last-footer-->
    </footer><!--end .itq-wrapper-->
	<section class="support">
		<figure class="online"><img src="images/online.png"/></figure>
        <h3>Hỗ trợ trực tuyến<i class="fa fa-close"></i></h3>
        <section class="form-support">
        	<section class="list-text">
            </section>	
        </section>
	</section>












	<!--Thu vien owl-->
    <script src="plugins/owl.carousel.js" type="text/javascript"></script>
    <!--search-->
    <script src="js/search.js" type="text/javascript"></script>    
    <!--Thu vien supper slide-->
    <script src="plugins/supperslide/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="plugins/supperslide/jquery.animate-enhanced.min.js" type="text/javascript"></script>
    <script src="plugins/supperslide/hammer.min.js" type="text/javascript"></script>
    <script src="plugins/supperslide/jquery.superslides.min.js" type="text/javascript"></script>
   
    <script src="plugins/slider1/jquery.flexisel.js" type="text/javascript" ></script>
    <!--appear-->
    <script src="plugins/jquery.appear.js" type="text/javascript"></script>
     <!--nicescroll-->
    <script src="plugins/jquery.nicescroll.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function(e) {
		  //scroll 
		  $("body").niceScroll({zindex:"99999"});
		  //superlide 
          $('#slides').superslides({
				play:7000,
				pagination:false,
				hashchange:false,
				inherit_width_from:'#slides',
				inherit_height_from:'#slides'});
		   //owl-slide		
		   $("#owl-demo").owlCarousel({
                autoPlay: 5000, //Set AutoPlay to 3 seconds
                items : 1,
                itemsDesktop : [1020,1],
				itemsDesktopSmall :[768,1],
                itemsMobile :     [480,1]
                
            });	
			//icon
			$('.icon-f').hover(function(e) {
                $(this).addClass('animated tada');
            },function(e) {
			 $(this).removeClass('animated tada');
			});
		    //menu
			$('.fa-bars').click(function(e) {
                $('.navigation').toggle('fast');
            });	
			//support
			 $(".support").css("position", "fixed");
             $(".support").css("bottom", "10px");
             $(".support").css("right", "3px");
             $(".support").css("display", "block");
			 $(".support").css("z-index", "999999999999");
			 $('h3 i.fa-close').click(function(e) {
                $('.form-support').css('display','none');
            });	
			 $('.online img').click(function(e) {
                $('.form-support').css('display','block');
            });	
			 
			 
			
      });
    </script>
      <script type="text/javascript">

        $(window).load(function() {
           
            $("#flexiselDemo2").flexisel({
                enableResponsiveBreakpoints: true,
				 autoPlay: true,
                responsiveBreakpoints: {
                    portrait: {
                        changePoint:480,
                        visibleItems: 1
                    },
                    landscape: {
                        changePoint:640,
                        visibleItems: 2
                    },
                    tablet: {
                        changePoint:768,
                        visibleItems: 3
                    }
                }
            });

            $("#flexiselDemo3").flexisel({
                visibleItems: 4,
                animationSpeed: 2000,
                autoPlay: true,
                autoPlaySpeed: 7000,
                pauseOnHover: true,
                enableResponsiveBreakpoints: true,
                responsiveBreakpoints: {
                    portrait: {
                        changePoint:480,
                        visibleItems: 1
                    },
                    landscape: {
                        changePoint:640,
                        visibleItems: 2
                    },
                    tablet: {
                        changePoint:768,
                        visibleItems: 3
                    }
                }
            });

         

        });
    </script>
     <script type="text/javascript">
        jQuery(function() {
            jQuery('.hud_products').appear();
            jQuery('.hud_trademark').appear();
            jQuery('.hud').appear();
            jQuery('.itq-footer').appear();
            jQuery(document.body).on('appear', '.itq-footer', function(e, $affected) {
                var fadeDelayAttr;
                var fadeDelay;
                jQuery(this).each(function(){
                    if (jQuery(this).data("delay")) {
                        fadeDelayAttr = jQuery(this).data("delay")
                        fadeDelay = fadeDelayAttr;
                    } else {
                        fadeDelay = 0;
                    }
                    jQuery(this).delay(fadeDelay).queue(function(){
                        jQuery(this).addClass('animated').clearQueue();
                    });
                })
            });
            jQuery(document.body).on('appear', '.hud', function(e, $affected) {
                var fadeDelayAttr;
                var fadeDelay;
                jQuery(this).each(function(){
                    if (jQuery(this).data("delay")) {
                        fadeDelayAttr = jQuery(this).data("delay")
                        fadeDelay = fadeDelayAttr;
                    } else {
                        fadeDelay = 0;
                    }
                    jQuery(this).delay(fadeDelay).queue(function(){
                        jQuery(this).addClass('animated').clearQueue();
                    });
                })
            });
            jQuery(document.body).on('appear', '.hud_products', function(e, $affected) {
                var fadeDelayAttr;
                var fadeDelay;
                jQuery(this).each(function(){
                    if (jQuery(this).data("delay")) {
                        fadeDelayAttr = jQuery(this).data("delay")
                        fadeDelay = fadeDelayAttr;
                    } else {
                        fadeDelay = 0;
                    }
                    jQuery(this).delay(fadeDelay).queue(function(){
                        jQuery(this).addClass('animated').clearQueue();
                    });
                })
            });
            jQuery(document.body).on('appear', '.hud_trademark', function(e, $affected) {
                var fadeDelayAttr;
                var fadeDelay;
                jQuery(this).each(function(){
                    if (jQuery(this).data("delay")) {
                        fadeDelayAttr = jQuery(this).data("delay")
                        fadeDelay = fadeDelayAttr;
                    } else {
                        fadeDelay = 0;
                    }
                    jQuery(this).delay(fadeDelay).queue(function(){
                        jQuery(this).addClass('animated').clearQueue();
                    });
                })
            });
        });
    </script>


</html>